<template>
  <q-dialog class="my-dialog-form" v-model="isFlagShow">
    <q-card class="my-card">
      <q-toolbar class="row items-center my-form-header">
        <div>
          {{dlgTitle}}
        </div>
        <q-space />
        <q-btn flat round dense icon="mdi-close" @click="close"/>
      </q-toolbar>
      <q-separator />
      <q-card-setion class="q-mx-sm">
        <q-scroll-area class="my-form-container">
          <div class="col q-gutter-xs">
            <q-item class="items-center">
              <q-item-label><span style="color: red">**</span>&nbsp;&nbsp;&nbsp;&nbsp;用户ID：</q-item-label>
              <q-item-section>
                <q-input
                  outlined
                  dense
                  readonly
                  type="number"
                  v-model.number="param.id"
                />
              </q-item-section>
            </q-item>
            <q-item class="items-center">
              <q-item-label><span style="color: red">**</span>用户昵称：</q-item-label>
              <q-item-section>
                <q-input
                  readonly
                  outlined
                  dense
                  v-model="param.nick"
                />
              </q-item-section>
            </q-item>
            <q-item class="items-center">
              <q-item-label><span style="color: red">**</span>用户角色：</q-item-label>
              <q-item-section>
                <q-select
                  dense
                  outlined
                  options-dense
                  :options="roleArr"
                  option-value="label"
                  emit-value
                  options-selected-class="teal"
                  v-model="param.role"
                  @blur="v$.role.$touch()"
                  :error="v$.role.$error"
                  error-message="请选择所分配角色！"
                />
              </q-item-section>
            </q-item>
          </div>
        </q-scroll-area>
      </q-card-setion>
      <q-separator />
      <div class="q-gutter-sm my-form-footer">
        <q-btn
          unelevated
          dense
          label="提交"
          type="submit"
          color="teal-3"
          @click="onSubmit"
          style="width: 80px"
        />
        <q-btn
          unelevated
          dense
          label="重置"
          type="reset"
          color="orange-3"
          @click="onReset"
          style="width: 80px"
        />
      </div>
    </q-card>
  </q-dialog>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, toRef, toRefs, PropType, watch } from 'vue';
import { UserNode, UserNodeVO } from './UserModel';
import { isObjectEmpty } from '../../../util/utils';
import { required, minLength } from '@vuelidate/validators'
import { useVuelidate } from '@vuelidate/core';
import { cataItem } from 'src/hook/common/useCatalogType';
import { useCatalogTool } from 'src/hook/common/useCatalogTool';


export default defineComponent({
  name: 'UserSetRoleDlg',
  props: {
    message: String,
    itemData: {
      type: Object as PropType<UserNodeVO>,
      required: true
    },
    roleArr: {
      type: Array as PropType<cataItem[]>,
      required: true
    }
  },
  emits: ['submit-role-item', 'cancel-role-item'],
  setup (props, context) {
    //数据解构
    const {
      message,
      itemData,
      roleArr
    } = toRefs(props);

    //*******************************
    //      目录操作
    //*******************************
    const {
      findCatalogLabel,
      findCatalogId
    } = useCatalogTool();

    //*******************************
    //      表单项
    //*******************************
    //窗口显示
    let isFlagShow = ref(false);

    //窗口标题
    let dlgTitle = ref('');

    //界面数据
    let param = ref<UserNodeVO>({
      id: 0,
      nick: '',
      role: ''
    });

    //关闭窗口
    const close = () => {
      isFlagShow.value = false;
      context.emit('cancel-role-item');
    }

    //显示窗口
    const show = (text: string) => {
      isFlagShow.value = true;
      dlgTitle.value = text;
    }

    //提交窗口
    const onSubmit = () => {
      if (param.value) {
        if (param.value.role === '') {
          close();
        } else {
          isFlagShow.value = false;
          let item: UserNode = {
            id: param.value.id,
            nick: param.value.nick,
            roleId: findCatalogId(roleArr.value, param.value.role)
          };

          //发送消息
          context.emit('submit-role-item', item);
        }
      } else {
        close();
      }
    }

    //重置
    const onReset = () => {
      if (param.value) {
        param.value.role = '';
      }

      //表单验证初始化
      v$.value.$reset();
    }


    //*******************************
    //      表单校验
    //*******************************
    //配置校验规则
    const rules = {
      id: { required },
      nick: { required, minLength: minLength(2) },
      role: { required }
    }

    //使用vuelidate，建立变量对应的校验规则
    const v$ = useVuelidate(rules, {
      id: toRef(param.value, 'id'),
      nick: toRef(param.value, 'nick'),
      role: toRef(param.value, 'role')
    });


    //*******************************
    //      启动模块
    //*******************************
    //初始化
    const init = () => {
      if (!isObjectEmpty(itemData.value)) {
        param.value.id = itemData.value.id;
        param.value.nick = itemData.value.nick;
        param.value.role = itemData.value.role;
      }

      //表单验证初始化
      v$.value.$reset();
    }

    //监听对象的所有属性
    watch(() => props.itemData, () => {
      init();
    }, { deep: true });

    //启动挂载组件
    onMounted(() => {
      init();
    })

    return {
      message,
      itemData,
      roleArr,

      isFlagShow,
      dlgTitle,
      param,
      init,
      close,
      show,
      onSubmit,
      onReset,
      v$
    }
  }
})
</script>

<style lang="scss" scoped>
.my-card {
  alignment: center;
  width: 400px;
  max-width: 500px;
  .my-form-container {
    text-align: center;
    padding: 5px 50px 5px 50px;
    height: 250px;
  }
}

</style>
